<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24"><div class="hui" /></el-col>
      </el-row>
      <el-row>
        <el-col
          :span="12"
        ><div class="withdrawal">
          <div class="t">提现统计</div>
          <div>
            <span>本周</span>
            <span>本月</span>
            <span class="txspan">全年</span>
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              size="mini"
              end-placeholder="结束日期"
            />
          </div>
          <div ref="withdrawal" class="z" /></div></el-col>
        <el-col
          :span="12"
        ><div class="earnings">
          <div class="t">平台收益渠道统计</div>
          <span class="txxspan">一季度</span>
          <span>二季度</span>
          <span>三季度</span>
          <div ref="earnings" class="z" />
          <div class="earningsz">
            <h3>
              店铺订单 <span>| 20% <span>￥1234</span></span>
            </h3>
            <h3>
              素材 <span class="earningszs">| 16% <span>￥1334</span></span>
            </h3>
            <h3>
              素材抽比 <span>| 10% <span>￥1434</span></span>
            </h3>
            <h3>
              店铺权益 <span>| 10% <span>￥2234</span></span>
            </h3>
          </div>
        </div></el-col>
      </el-row>
      <el-row>
        <el-col
          :span="12"
        ><div class="coupons">
          <div class="t">平台优惠劵趋势统计</div>
          <div ref="coupons" class="z" /></div></el-col>
        <el-col
          :span="12"
        ><div class="shop">
          <div class="t">店铺类型</div>
          <div ref="shop" class="z" /></div></el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
        ><div class="order-form">
          <div class="t">订单统计</div>
          <div class="tt">
            <img src="@/assets/images/主页/Order-statistics.png" alt="">
          </div>
          <div ref="orderform" class="z" />
          <div class="thetitle">订单趋势</div>
          <div class="rthetitle">
            <span class="txrthetitle">今日</span>
            <span>本周</span>
            <span>本月</span>
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              size="mini"
              end-placeholder="结束日期"
            />
          </div></div></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
var echarts = require('echarts');

export default {
  name: 'Dashboard',
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['name']),
  },
  mounted() {
    const withdrawal = echarts.init(this.$refs.withdrawal);
    withdrawal.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '用户提现', '店铺提现'],
          ['1月', 80, 51],
          ['2月', 40, 30],
          ['3月', 86, 75],
          ['4月', 66, 55],
          ['5月', 86, 65],
          ['6月', 76, 65],
          ['7月', 55, 43],
        ],
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }],
    });
    const earnings = echarts.init(this.$refs.earnings);
    earnings.setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '1%',
        left: 'center',
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 2548, name: '店铺订单' },
            { value: 735, name: '素材' },
            { value: 580, name: '素材抽比' },
            { value: 484, name: '店铺权益' },
            { value: 234, name: '' },
            { value: 300, name: '' },
          ],
        },
      ],
    });
    const coupons = echarts.init(this.$refs.coupons);
    coupons.setOption({
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['平台优惠券', '商家优惠卷'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['10.00', '11.00', '12.00', '13.00', '14.00', '15.00', '16.00'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '平台优惠券',
          type: 'line',
          stack: '总量',
          //   data: [120, 282, 301, 134, 90, 230, 210],
          data: [220, 382, 401, 334, 190, 430, 310],
        },
        {
          name: '商家优惠卷',
          type: 'line',
          stack: '总量',
          //   data: [50, 30, 0, 234, 290, 330, 310],
          data: [200, -1, 0, 234, 290, 330, -1],
        },
      ],
    });
    const shop = echarts.init(this.$refs.shop);
    shop.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['2012', '2013', '2014', '2015', '2016'],
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '待审核',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [520, 1532, 901, 534, 600],
        },
        {
          name: '共享店铺',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [320, 82, 691, 84, 290],
        },
        {
          name: '违规被停运',
          type: 'bar',
          stack: '广告',
          emphasis: {
            focus: 'series',
          },
          data: [550, 332, 201, 554, 590],
        },
      ],
    });
    const orderform = echarts.init(this.$refs.orderform);
    orderform.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '10-23周日',
          '10-24周一',
          '10-25周二',
          '10-26周三',
          '10-27周四',
          '10-28周五',
          '10-29周六',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [820, 932, 901, 1234, 900, 850, 800],
          type: 'line',
          areaStyle: {},
        },
      ],
    });
    window.onresize = function() {
      withdrawal.resize();
      earnings.resize();
      coupons.resize();
      shop.resize();
      orderform.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  background-color: rgba(240, 242, 245, 1);
  height: 100%;
  width: 100%;
  .t {
    font-size: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e9e9e9;
  }

  .el-main {
    margin: 50px 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0px;
    overflow: hidden;
    .el-row {
      margin-bottom: 20px;
    }
    .hui {
      width: 100%;
      margin-top: 50px;
      height: 42px;
      background-color: rgba(240, 242, 245, 1);
    }
    .withdrawal {
      width: 100%;
      height: 450px;
      margin-right: 10px;

      span {
        margin-left: 30px;
        margin-right: 66px;
      }
      .txspan {
        background-color: #1890ff;
        color: #fff;
      }

      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .earnings {
      width: 100%;
      height: 450px;
      margin-left: 20px;
      span {
        display: inline-block;
        border: 1px solid black;
        padding: 5px;
      }
      .txxspan {
        color: #1890ff;
        border: 1px solid#1890ff;
      }
      .z {
        width: 100%;
        height: 80%;
        padding-top: 10px;
      }
      .earningsz {
        position: relative;
        top: -263px;
        // right: -600px;
        right: 0;
        h3 {
          color: #111;
          font-size: 14px;
          font-weight: 700;
          .earningszs {
            margin-left: 27px;
          }
          span {
            border: none;
            color: #ccc;
            span {
              color: black;
              margin-left: 47px;
              font-weight: 400;
            }
          }
        }
      }
    }
    .coupons {
      width: 100%;
      height: 450px;
      margin-right: 20px;
      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .shop {
      width: 100%;
      height: 450px;
      margin-left: 20px;
      .z {
        width: 100%;
        height: 85%;
        padding-top: 10px;
      }
    }
    .order-form {
      width: 100%;
      height: 450px;
      .tt {
        display: inline-block;
        width: 10%;
        height: 200px;
        margin-left: 70px;
        img {
          margin: 0 0 83px -51px;
        }
      }
      .z {
        display: inline-block;
        width: 80%;
        height: 80%;
        padding-top: 10px;
      }
      .thetitle {
        position: relative;
        top: -343px;
        left: 340px;
        color: #ccc;
      }
      .rthetitle {
        position: relative;
        top: -366px;
        left: 800px;
        span {
          margin-left: 30px;
          margin-right: 20px;
        }
        .txrthetitle {
          background-color: #1890ff;
        }
      }
    }
  }
}
</style>
